<!-- 进件公共头部 -->
<template>
    <div class="apply-header">
        <ul class="over" style="padding: 18px 36px">
            <li class="over fsbig mb10"><h2 class="fl">{{orderInfo.custName}} {{orderInfo.applyNo}}</h2><b class="fr status">{{orderStatus}}</b></li>
            <li class="fsmedium">
                <p class="mb10">
                    <span>{{businessTypeStr}}&nbsp;</span>
                    <span>{{carTypeStr}}&nbsp;</span>
                    <span>{{carNatureStr}}</span>
                </p>
            </li>
            <li class="over fssmall">
                <span class="fl">
                        <span>订单创建:&nbsp;&nbsp;{{orderInfo.createTime}}</span>
                        <i class="icon" v-show="typeof orderInfo.intoFirstDate!=='undefined'">|</i>
                        <span v-show="typeof orderInfo.intoFirstDate!=='undefined'">订单提交:&nbsp;&nbsp;{{orderInfo.intoFirstDate}}</span>
                        <i class="icon" v-show="typeof orderInfo.riskPassDate!=='undefined'">|</i>
                        <span v-show="typeof orderInfo.riskPassDate!=='undefined'">订单核准:&nbsp;&nbsp;{{orderInfo.riskPassDate}}</span>
                </span>
                <span class="fr">操作人 {{orderInfo.createBy}}</span></li>
        </ul>
    </div>
</template>
<script>
    import {getByTypes} from "_p/basic/api/admin/datadic";
    import {deepClone} from '@/libs/utils/ObjectClone';

    export default {
        name:"apply-header",
        props: {
            orderInfo: {
                type: Object
            },
        },
        computed:{
            carNatureStr(){
                for(let i=0; i<this.dataDic.carNature.length;i++){
                    if(this.dataDic.carNature[i].value === this.orderInfo.carNature){
                        return this.dataDic.carNature[i].title;
                    }
                }
                return "";
            },
            carTypeStr(){
                for(let i=0; i<this.dataDic.carType.length;i++){
                    if(this.dataDic.carType[i].value === this.orderInfo.carType){
                        return this.dataDic.carType[i].title;
                    }
                }
                return "";
            },
            businessTypeStr(){
                for(let i=0; i<this.dataDic.businessType.length;i++){
                    if(this.dataDic.businessType[i].value === this.orderInfo.businessType){
                        return this.dataDic.businessType[i].title;
                    }
                }
                return "";
            },
            orderStatus(){
                for(let i=0; i<this.dataDic.applyStatus.length;i++){
                    if(this.dataDic.applyStatus[i].value === this.orderInfo.applyStatus){
                        return this.dataDic.applyStatus[i].title;
                    }
                }
                return "";
            },
        },
        data(){
            return{
                dataDic:{
                    businessType: [],
                    carType: [],
                    carNature: [],
                    applyStatus:[]
                },
            }
        },
        mounted () {
            this.initDataDic();
        },
        methods: {
            initDataDic(){
                //数据字典
                let arr = ["businessType", "carType", "carNature","applyStatus"];
                getByTypes(arr).then(res => {
                    if (res.code === "0000") {
                        this.dataDic = deepClone(res.data);
                    }
                });
            },
        }
    }
</script>
<style scoped>
.apply-header{
    height: 122px;
    margin:8px auto 18px;
    background-color: #FFFFFF;
}
.apply-header .fsbig{
    font-size: 16px;
    color: #4A4A4A;
}
.apply-header .fsbig h2{
    font-weight: normal;
    font-size: 16px;
}
.apply-header .fsbig b.status{
    font-weight: normal;
    position: relative;
}
.apply-header .fsbig b.status::before{
    content: "";
    width: 8px;
    height: 8px;
    background: #6FC312;
    position: absolute;
    border-radius: 50%;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
}
.apply-header .fsmedium{
    font-size: 14px;
    color:#666666;
}
.apply-header .fssmall{
    font-size: 12px;
    color:#666;
}
.apply-header .fssmall i{
    font-style: normal;
}
</style>
